<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Classess</title>
    <link rel="shortcut icon" type="image/png" href="img/fav.png">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/class.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/holder.min.js"></script>

</head>

<body>
    <div class="container-fulid">

        <!-- header -->
        <div class="nav_icon">
            <div class="row">
                <div class="col-md-4 col-md-offset-1">
                    <span class="navicon"><i class="fa fa-envelope-o" aria-hidden="true"></i>info@yourdomain.com</span>
                    <span class="navicon"><i class="fa fa-mobile fa-1x" aria-hidden="true"></i>+15222729355</span>
                </div>
                <div class="col-md-offset-5 col-md-2 visible-lg-block">
                    <a href=""><i class="fa fa-facebook fa_icon" aria-hidden="true"></i> </a>
                    <a href=""><i class="fa fa-twitter fa_icon" aria-hidden="true"></i></a>
                    <a href=""><i class="fa fa-linkedin fa_icon" aria-hidden="true"></i></a>
                    <a href=""><i class="fa fa-youtube fa_icon" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>


        <!-- navbar -->
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" data-target="#mycollapse" data-toggle="collapse">
                        <span class="sr-only">Toggle-navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="" class="navbar-brand">
                        <img src="img/logo.png" alt="logo">
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="mycollapse" style="margin-left:570px">
                    <ul class="nav navbar-nav">
                      <li><a href="home.html">Home <span class="sr-only">(current)</span></a></li>
                      <li><a href="class.html">Classess</a></li>
                      <li><a href="gallery.html">Gallery</a></li>
                      <li class="dropdown">
                        <a href="page.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="faq.html">FAQ</a></li>
                            <li><a href="404.html">404</a></li>
                        </ul>
                      </li>
                      <li><a href="blog.html">Blog</a></li>
                      <li><a href="contact.html">Contact</a></li>
                      <li><a href="facility.html">Facilities</a></li>
                    </ul>  
                  </div>
          

            </div>
        </nav>


        <!-- search -->
        <div class="search">
            <h3>Classess</h3>
            <div class="row visible-lg-block">
                <div class="form-inline">
                    <div class="form-group search-gallery">
                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-home"></span>
                            </div>
                            <input type="text" class="form-control" placeholder="/ Classes">
                        </div>

                    </div>
                </div>
            </div>
        </div>

   <!-- classess -->
   <div class="container">
        <div class="row" style="margin-top:30px;">
            <div class="class-bd col-md-5">
                <div class="col-md-3">
                    <img src="img/png/one.png" alt="">
                </div>
                <div class="col-md-9">
                    <dt>Early Preschool</dt>
                    <dd style="color:#ffaa18">Start June 28</dd>
                    <dd>
                        The line was quiet except for the cries of the boy's mother. Later in the day, the
                        mother went into the boy's room because she wanted to remember him. She thought she
                        would start by looking at his clothes. So she opened the closet.
                    </dd>
                    <a href="" class="btn btn-1">Apply</a>
                </div>
            </div>
            <div class=" class-bd col-md-5">
                <div class="col-md-3">
                    <img src="img/png/two.png" alt="">
                </div>
                <div class="col-md-9">
                    <dt>Infants Learning</dt>
                    <dd style="color:#ffaa18">Start June 28</dd>
                    <dd>
                        The line was quiet except for the cries of the boy's mother. Later in the day, the
                        mother went into the boy's room because she wanted to remember him. She thought she
                        would start by looking at his clothes. So she opened the closet.
                    </dd>
                    <a href="" class="btn btn-2">Apply</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class=" class-bd col-md-5">
                <div class="col-md-3">
                    <img src="img/png/three.png" alt="">
                </div>
                <div class="col-md-9">
                    <dt>Nursery Classess</dt>
                    <dd style="color:#ffaa18">Start June 28</dd>
                    <dd>
                        The line was quiet except for the cries of the boy's mother. Later in the day, the
                        mother went into the boy's room because she wanted to remember him. She thought she
                        would start by looking at his clothes. So she opened the closet.
                    </dd>
                    <a href="" class="btn btn-3">Apply</a>
                </div>
            </div>
            <div class="class-bd col-md-5">
                <div class="col-md-3">
                    <img src="img/png/four.png" alt="">
                </div>
                <div class="col-md-9">
                    <dt>Toddler Classess</dt>
                    <dd style="color:#ffaa18">Start June 28</dd>
                    <dd>
                        The line was quiet except for the cries of the boy's mother. Later in the day, the
                        mother went into the boy's room because she wanted to remember him. She thought she
                        would start by looking at his clothes. So she opened the closet.
                    </dd>
                    <a href="" class="btn btn-4">Apply</a>
                </div>
            </div>
        </div>
    </div>
      

        <!-- contact us -->
        <div class="contact">
            <h4 style="color:#333">Visit our</h4>
            <h4 style="color:#ffffff">CareVin play school</h4>
            <a href="contact.html" class="btn">Contact Us</a>
        </div>

<!-- our staff -->
<div class="container">
        <div class="staff">
                <h4 style="color:#333">Our &nbsp;<span style="color:#86c417">Staff</span></h4>
                    <p style="color:#666866">Lorem ipsum dolor sit amet,consectetur adipiscing elit.Proin gravida.</p>
            <div class="row">
                <div class="staff-num staff1 col-md-2">
                    <dl><img src="img/staff1.jpg" alt="">
                        <dt>John Wills</dt>
                        <dd>Teacher</dd>
                    </dl>
                </div>
                <div class="staff-num staff2  col-md-2">
                    <dl><img src="img/staff2.jpg" alt="">
                        <dt>John Wills</dt>
                        <dd>Teacher</dd>
                    </dl>
                </div>
                <div class="staff-num staff3  col-md-2">
                    <dl><img src="img/staff3.jpg" alt="">
                        <dt>John Wills</dt>
                        <dd>Teacher</dd>
                    </dl>
                </div>
                <div class="staff-num staff4 col-md-2">
                    <dl><img src="img/staff4.jpg" alt="">
                        <dt>John Wills</dt>
                        <dd>Teacher</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
        <!-- footer -->
        <div class="footer">
            <div class="footer-top"></div>
            <div class="footer-content">
                <div class="footer-info">
                    <div class="row col-md-7 col-md-offset-5 col-xs-10 col-xs-offset-2">
                        <p class="footer-logo"> </p>
                    </div>
                    <div class="row  col-md-12 col-xs-11col-xs-offset-1">
                        <p class="footer-text">Copyright &copy; 2018 Company name All rights reserved.网页模板 </p>
                    </div>
                    <div class="row">
                        <div class="footer-icon col-xs-12">
                            <a href=""><i class="fa fa-facebook fa_icon" aria-hidden="true"></i> </a>
                            <a href=""><i class="fa fa-twitter fa_icon" aria-hidden="true"></i></a>
                            <a href=""><i class="fa fa-linkedin fa_icon" aria-hidden="true"></i></a>
                            <a href=""><i class="fa fa-youtube fa_icon" aria-hidden="true"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>